<template>
    <div id="data-view">
      <dv-full-screen-container>
        <div class="main-header">
          <dv-decoration-6 :color="['#3958b8', '#00c0ff']" style="width:300px;height:30px;" />
           <div class="mh-middle">Demo-机电运维管理台</div>
          <dv-decoration-6 :color="['#3958b8', '#00c0ff']" style="width:300px;height:30px;" />
  
        </div>
  
        <dv-border-box-1 class="main-container">
          <div class="mc-top">
            <Top-Left-Cmp />
            <Top-Middle-Cmp />
            <Top-right-Cmp />
          </div>
          <div class="mc-bottom">
            <dv-border-box-6 class="bottom-left-container">
              <dv-decoration-4 class="mcb-decoration-1" style="width:5px;height:45%;" />
              <dv-decoration-4 class="mcb-decoration-2" style="width:5px;height:45%;" />
              <Bottom-Left-Chart-1 />
              <Bottom-Left-Chart-2 />
            </dv-border-box-6>
  
            <div class="bottom-right-container">
              <Bottom-Right-Table-1 />
              <Bottom-Right-Table-2 />
              <Bottom-Right-Table-3 />
              <Bottom-Right-Table-4 />
            </div>
          </div>
        </dv-border-box-1>
  
      </dv-full-screen-container>
    </div>
  </template>
  
  <script>
  import TopLeftCmp from './components/TopLeftCmp'
  import TopMiddleCmp from './components/TopMiddleCmp'
  import TopRightCmp from './components/TopRightCmp'
  
  import BottomLeftChart1 from './components/BottomLeftChart1'
  import BottomLeftChart2 from './components/BottomLeftChart2'
  
  import BottomRightTable1 from './components/BottomRightTable1'
  import BottomRightTable2 from './components/BottomRightTable2'
  import BottomRightTable3 from './components/BottomRightTable3'
  import BottomRightTable4 from './components/BottomRightTable4'
  
  export default {
    name: 'DataView',
    components: {
      TopLeftCmp,
      TopMiddleCmp,
      TopRightCmp,
      BottomLeftChart1,
      BottomLeftChart2,
      BottomRightTable1,
      BottomRightTable2,
      BottomRightTable3,
      BottomRightTable4
    },
    data () {
      return {}
    }
  }
  </script>
  
  <style lang="scss">
  #data-view {
    width: 100%;
    height: 100%;
    background-color: #030409;
    color: #fff;
  
    #dv-full-screen-container {
      background-image: url('./components/img/bg.png');
      background-size: 100% 100%;
      box-shadow: 0 0 3px blue;
      display: flex;
      flex-direction: column;
    }
  
    .main-header {
      height: 80px;
      display: flex;
      justify-content:center;
      align-items: flex-end;
  
      .mh-left {
        font-size: 20px;
        color: rgb(1,134,187);
  
        a:visited {
          color: rgb(1,134,187);
        }
      }
  
      .mh-middle {
        margin: 0 48px;
        font-size: 30px;
      }
    }
  
    .main-container {
      height: calc(100% - 80px);
  
      .mc-top, .mc-bottom {
        box-sizing: border-box;
        padding: 30px;
        display: flex;
      }
  
      .mc-top {
        height: 40%;
      }
  
      .mc-bottom {
        height: 60%;
      }
  
      .top-left-cmp, .bottom-left-container {
        width: 32%;
      }
  
      .top-middle-cmp, .top-right-cmp {
        width: 34%;
      }
  
      .bottom-left-container {
        position: relative;
  
        .border-box-content {
          display: flex;
        }
  
        .mcb-decoration-1, .mcb-decoration-2 {
          position: absolute;
          left: 50%;
          margin-left: -2px;
        }
  
        .mcb-decoration-1 {
          top: 5%;
          transform: rotate(180deg);
        }
  
        .mcb-decoration-2 {
          top: 50%;
        }
  
        .bottom-left-chart-1, .bottom-left-chart-2 {
          width: 50%;
          height: 100%;
        }
      }
  
      .bottom-right-container {
        width: 68%;
        padding-left: 30px;
        box-sizing: border-box;
        display: flex;
      }
    }
  }
  </style>
  